<template>
  <div class="body">
    <div class="team">
      <h3>团队成员:</h3>
      <el-button
        type="primary"
        @click="StudentdialogFormVisible = true"
        style="height: 40px; width: 100px"
      >
        添加
      </el-button>
    </div>
    <!-- 添加弹框 -->
    <el-dialog v-model="StudentdialogFormVisible" title="填写团队成员信息" width="800">
      <el-form :model="Studentform" class="teamform">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="Studentform.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="Studentform.gender" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学号" :label-width="formLabelWidth">
          <el-input v-model="Studentform.studentID" autocomplete="off" />
        </el-form-item>
        <el-form-item label="民族" :label-width="formLabelWidth">
          <el-input v-model="Studentform.nation" autocomplete="off" />
        </el-form-item>
        <el-form-item label="出生年月" :label-width="formLabelWidth">
          <el-input v-model="Studentform.birthday" autocomplete="off" />
        </el-form-item>
        <el-form-item label="所在学院" :label-width="formLabelWidth">
          <el-input v-model="Studentform.college" autocomplete="off" />
        </el-form-item>
        <el-form-item label="专业班级" :label-width="formLabelWidth">
          <el-input v-model="Studentform.class" autocomplete="off" />
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="Studentform.telephone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth">
          <el-input v-model="Studentform.mobilePhone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="E-mail" :label-width="formLabelWidth">
          <el-input v-model="Studentform.Email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="项目中的分工" :label-width="formLabelWidth">
          <el-input v-model="Studentform.DivisionLabor" autocomplete="off" />
        </el-form-item>
        <el-form-item label="是否负责人" :label-width="formLabelWidth">
          <el-input v-model="Studentform.personCharge" autocomplete="off" />
        </el-form-item>
        <!-- <el-form-item label="Zones" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="Please select a zone">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </el-select>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="StudentdialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addStudent"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 团队人员列表 -->
    <el-table :data="StudenttableData" border style="width: 100%" align="center">
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="gender" label="性别" align="center" />
      <el-table-column prop="studentID" label="学号" align="center" />
      <el-table-column prop="nation" label="民族" align="center" />
      <el-table-column prop="birthday" label="出生年月" align="center" />
      <el-table-column prop="college" label="所在学院" align="center" />
      <el-table-column prop="class" label="专业班级" align="center" />
      <el-table-column prop="telephone" label="联系电话" align="center" />
      <el-table-column prop="mobilePhone" label="手机" align="center" />
      <el-table-column prop="Email" label="E-mail" align="center" />
      <el-table-column prop="DivisionLabor" label="项目中的分工" align="center" />
      <el-table-column prop="personCharge" label="是否负责人" align="center" />
      <el-table-column label="Operations" align="center" width="150">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 修改 </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDeleteStudent(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="StudentList">
      <div class="StudentListHeader">
        <ul>
          <li>序号</li>
          <li>姓名</li>
          <li>性别</li>
          <li>学号</li>
          <li>民族</li>
          <li>出生年月</li>
          <li>所在学院</li>
          <li>专业班级</li>
          <li>联系电话</li>
          <li>手机</li>
          <li>E-mail</li>
          <li>项目中的分工</li>
          <li>是否负责人</li>
          <li>
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 修改 </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </li>
        </ul>
      </div>
      <div class="StudentListBody">
        <ul v-for="(item, index) in StudenttableData" :key="item.id">
          <li>{{ index + 1 }}</li>
          <li>{{ item.name }}</li>
          <li>{{ item.gender }}</li>
          <li>{{ item.nation }}</li>
          <li>{{ item.birthday }}</li>
          <li>{{ item.college }}</li>
          <li>{{ item.class }}</li>
          <li>{{ item.telephone }}</li>
          <li>{{ item.mobilePhone }}</li>
          <li>{{ item.Email }}</li>
          <li>{{ item.DivisionLabor }}</li>
          <li>{{ item.personCharge }}</li>
          <li>修改</li>
        </ul>
      </div>
    </div> -->

    <el-divider border-style="dashed" class="marginTopBottom" />
    <!-- 指导老师 -->
    <div class="team">
      <h3>指导老师:</h3>
      <el-button
        type="primary"
        @click="MentordialogFormVisible = true"
        style="height: 40px; width: 100px"
      >
        添加
      </el-button>
    </div>
    <!-- 添加弹框 -->
    <el-dialog v-model="MentordialogFormVisible" title="填写指导老师信息" width="800">
      <el-form :model="Mentorform" class="teamform">
        <el-form-item label="指导教师姓名" :label-width="formLabelWidth">
          <el-input v-model="Mentorform.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth">
          <el-input v-model="Mentorform.unit" autocomplete="off" />
        </el-form-item>
        <el-form-item label="职称/职务" :label-width="formLabelWidth">
          <el-input v-model="Mentorform.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth">
          <el-input v-model="Mentorform.mobilePhone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="E-mail" :label-width="formLabelWidth">
          <el-input v-model="Mentorform.Email" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="MentordialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addMentor"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 导师列表 -->
    <el-table :data="MentortableData" border style="width: 100%" align="center">
      <el-table-column prop="name" label="指导教师姓名" align="center" />
      <el-table-column prop="unit" label="单位" align="center" />
      <el-table-column prop="title" label="职称/职务" align="center" />
      <el-table-column prop="mobilePhone" label="手机" align="center" />
      <el-table-column prop="Email" label="E-mail" align="center" />
      <el-table-column label="Operations" align="center" width="150">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 修改 </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-divider border-style="dashed" class="marginTopBottom" />

    <!-- 企业导师 -->
    <div class="team">
      <h3>企业导师:</h3>
      <el-button
        type="primary"
        @click="CorporateMentordialogFormVisible = true"
        style="height: 40px; width: 100px"
      >
        添加
      </el-button>
    </div>
    <!-- 添加弹框 -->
    <el-dialog v-model="CorporateMentordialogFormVisible" title="填写指导老师信息" width="800">
      <el-form :model="CorporateMentorform" class="teamform">
        <el-form-item label="企业导师姓名" :label-width="formLabelWidth">
          <el-input v-model="CorporateMentorform.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth">
          <el-input v-model="CorporateMentorform.unit" autocomplete="off" />
        </el-form-item>
        <el-form-item label="职称/职务" :label-width="formLabelWidth">
          <el-input v-model="CorporateMentorform.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth">
          <el-input v-model="CorporateMentorform.mobilePhone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="E-mail" :label-width="formLabelWidth">
          <el-input v-model="CorporateMentorform.Email" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="CorporateMentordialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addCorporateMentor"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 导师列表 -->
    <el-table :data="CorporateMentortableData" border style="width: 100%" align="center">
      <el-table-column prop="name" label="指导教师姓名" align="center" />
      <el-table-column prop="unit" label="单位" align="center" />
      <el-table-column prop="title" label="职称/职务" align="center" />
      <el-table-column prop="mobilePhone" label="手机" align="center" />
      <el-table-column prop="Email" label="E-mail" align="center" />
      <el-table-column label="Operations" align="center" width="150">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 修改 </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
// import { ref, onMounted } from 'vue'
import { ref } from 'vue'

const StudentdialogFormVisible = ref(false)
const MentordialogFormVisible = ref(false)
const CorporateMentordialogFormVisible = ref(false)
const formLabelWidth = '140px'

const Studentform = ref({
  name: '',
  gender: '',
  studentID: '',
  nation: '',
  birthday: '',
  college: '',
  class: '',
  telephone: '',
  mobilePhone: '',
  Email: '',
  DivisionLabor: '',
  personCharge: ''
})

const Mentorform = ref({
  name: '',
  title: '',
  unit: '',
  mobilePhone: '',
  Email: ''
})

const CorporateMentorform = ref({
  name: '',
  title: '',
  unit: '',
  mobilePhone: '',
  Email: ''
})

const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDeleteStudent = (index, row) => {
  console.log(index, row)
}

const StudenttableData = ref([
  {
    name: '张三',
    gender: '男',
    studentID: '20230101',
    nation: '汉族',
    birthday: '1999-05-12',
    college: '计算机科学与技术学',
    class: '2023级1班',
    telephone: '010-12345678',
    mobilePhone: '13800138000',
    Email: 'zhangsan@example.co',
    DivisionLabor: '软件开发',
    personCharge: '否'
  }
])

const MentortableData = ref([
  {
    name: '张三',
    unit: '桂林信息科技学院',
    title: '教授',
    mobilePhone: '13800138000',
    Email: 'zhangsan@example.co'
  }
])

const CorporateMentortableData = ref([
  {
    name: '李四',
    unit: '某某科技有限公司',
    title: '老板',
    mobilePhone: '13800138000',
    Email: 'zhangsan@example.co'
  }
])

//添加函数 Studentform
const addStudent = () => {
  StudenttableData.value.push(Studentform.value)
  StudentdialogFormVisible.value = false
  Studentform.value = {
    name: '',
    gender: '',
    studentID: '',
    nation: '',
    birthday: '',
    college: '',
    class: '',
    telephone: '',
    mobilePhone: '',
    Email: '',
    DivisionLabor: '',
    personCharge: ''
  }
}

const addMentor = () => {
  MentortableData.value.push(Mentorform.value)
  MentordialogFormVisible.value = false
  Mentorform.value = {
    name: '',
    title: '',
    unit: '',
    mobilePhone: '',
    Email: ''
  }
}

const addCorporateMentor = () => {
  console.log(123123123123)

  CorporateMentortableData.value.push(CorporateMentorform.value)
  CorporateMentordialogFormVisible.value = false
  // CorporateMentorform.value = ''
  CorporateMentorform.value = {
    name: '',
    title: '',
    unit: '',
    mobilePhone: '',
    Email: ''
  }
}
// 姓名：张三
// 性别：男
// 学号：20230101
// 民族：汉族
// 生日：1999-05-12
// 学院：计算机科学与技术学院
// 班级：2023级1班
// 电话：010-12345678
// 手机：13800138000
// Email：zhangsan@example.com
// 分工：软件开发
// 负责人：否
</script>

<style lang="less" scoped>
.body {
  margin: 20px 40px;
  padding: 30px 40px;
  .team {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    margin-top: 40px;
  }
  h3 {
    color: #196adc;
    margin-bottom: 20px;
  }
  .teamform {
    padding-right: 100px;
  }
  .marginTopBottom {
    margin: 50px 0;
  }

  // .StudentList {
  //   ul {
  //     display: flex;
  //     justify-content: space-between;
  //     margin: 0 30px;
  //     padding: 0 20px;
  //     height: 50px;
  //     line-height: 50px;
  //     // background-color: pink;
  //     &:hover {
  //       background-color: #eef1f5;
  //     }
  //     li {
  //       width: 8%;
  //       // background-color: pink;
  //       text-align: center;
  //     }
  //     // li:nth-child(2) {
  //     //   width: 20%;
  //     // }
  //     // li:nth-child(8) {
  //     //   width: 16%;
  //     // }
  //   }
  //   .StudentListHeader {
  //     ul {
  //       background-color: #1461cd;
  //       color: #fff;
  //       font-size: 14px;
  //     }
  //   }
  //   .StudentListBody {
  //     ul {
  //       font-size: 12px;
  //     }
  //   }
  // }
}
</style>
